import { getUserList } from "@/api/UserAxios"
import HeaderSearch from "@/components/HeaderSearch"
import MemberHeader from "@/components/MemberHeader"
import MemberList from '@/components/MemberList'
import { useEffect, useRef, useState } from "react"
import { useSelector } from "react-redux"

function MemberPage() {
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const [search, setSearch] = useState('')
    const getPage = useRef(true)
    const [userList, setUserList] = useState<Record<string, string | number>[]>([])
    const filter = useSelector((state:
        {
            filter:
            { filterResult: Record<string, string | number> }
        }
    ) => state.filter.filterResult)

    useEffect(() => {
        setUserList([]);
        setPage(1)
        setTotal(0)
    }, [search])

    useEffect(() => {
        getUserList(page, search, filter)
            .then(res => {
                setUserList(prev => [...prev, ...res.data])
                getPage.current = true
                if (!total) setTotal(res.total)
            })
    }, [page, search])
    return (
        <>
            <div className="overflow-hidden h-[100%] flex flex-col bg-[#FFF]">
                <MemberHeader
                    title="会员列表"
                    titleClass='ml-[236.9px] text-[33px]'
                    selectionVisible={true}
                    navigater='/home'
                />
                <HeaderSearch setSearch={setSearch} />
                <div
                    className="h-[61.9px] pt-[10px] pl-[24px]"
                    style={{ backgroundColor: '#F4F4F4' }}
                >
                    <p
                        className="text-[24px]"
                        style={{ color: '#999999' }}
                    >会员列表&nbsp;&nbsp;&nbsp;({total}人)</p>
                </div>
                <MemberList data={userList} setPage={setPage} getPage={getPage} />
            </div>
        </>
    )
}
export default MemberPage